<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-05 15:16:04
 * @LastEditTime: 2019-10-23 19:52:11
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<script type="text/javascript" src="../../script/jquery.js"></script>
	<script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/vant.min.js"></script>
	<script type="text/javascript" src="../../script/fastclick.js"></script>
	<script type="text/javascript" src="../../script/base.js"></script>
	<script type="text/javascript" src="../../script/db.js"></script>
	<style type="text/css">
		.content {
			background: #fff !important;
		}

		.h-h {
			background: #f8f9fb;
			color: #949faa;
			font-size: 14px;
		}

		.h-h .h-label {
			vertical-align: middle;
		}

		.h-h .sort {
			margin-left: 2px;
			width: 15px;
			vertical-align: middle;
		}

		.h-h .sort-tran {
			transform: rotate(180deg);
		}

		.h-p {
			position: relative;
		}

		.h-t {
			height: calc(100% - 45px);
			overflow: auto;
			-webkit-overflow-scrolling: touch;
		}

		.h-t .h-p:nth-child(even) {
			background: #fafcfb;
		}

		.h-r {
			position: relative;
		}

		.h-p .h-l {
			position: absolute;
			left: 0;
			top: 0;
			width: 40px;
			height: 44px;
			line-height: 44px;
			text-align: center;
			color: #969799;
			z-index: 1;
			padding-top: 2px;
		}

		/* .h-p .h-r {
			padding-left: 40px;
		} */

		.h-r .h-c {
			overflow: hidden;
		}

		.h-r .h-c>div {
			float: left;
			height: 44px;
			line-height: 44px;
			text-align: left;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding-left: 10px;
			font-size: 13px;
		}

		.h-r .h-s .van-cell {
			background-color: transparent;
			color: #969799;
			padding: 2px 6px;
		}

		.h-r .h-s .van-cell .van-cell__title {
			font-weight: 500;
		}

		.h-r .h-s .van-cell:not(:last-child)::after {
			display: none;
		}

		.h-r .h-s .van-cell .van-cell__value {
			color: #969799;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="init-full">
			<van-nav-bar class="head" title="草稿箱" left-arrow @click-left="onClickLeft">
				<div slot="right" class="head-right">
					<span @click="showDelete = !showDelete;">{{showDelete?'完成':'编辑'}}</span>
				</div>
			</van-nav-bar>
			<div class="body-no-bottom">
				<div class="content">
					<div class="h-h">
						<div class="h-p">
							<div class="h-r">
								<div class="h-c">
									<div v-for="(row,index) in dataList[0].valueArray" :style="{width: 100/dataList[0].valueArray.length + '%'}">
										<div>
											<span class="h-label">{{row.name}}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="h-t">
						<div class="h-p" v-for="(row,index) in dataList" @click="intoPage(row)">
							<div class="h-r">
								<div class="h-c">
									<div v-for="(item,index2) in row.valueArray" :style="{width: 100/row.valueArray.length + '%'}">{{item.value}}</div>
								</div>
							</div>

							

						</div>
					</div>
				</div>
				<van-loading v-if="showLoading" />
			</div>
		</div>

		<van-popup v-model="showSearch" round position="bottom">
			<div>
				<van-cell title="往来单位" :value="searchData.S_ClientName" is-link @click="openScreen(-1,10)">
				</van-cell>
				<van-cell title="开始时间" :value="searchData.S_SDate" @click="openDate(1)">
				</van-cell>
				<van-cell title="结束时间" :value="searchData.S_EDate" @click="openDate(2)">
				</van-cell>
			</div>
			<div class="btn-padding">
				<van-button type="primary" block style="border-radius: 0;" @click="searchList">查询</van-button>
			</div>
		</van-popup>


		<van-popup v-model="showDate" round position="bottom">
			<van-datetime-picker v-model="currentDate" type="date" @confirm="confirmDate" @cancel="cancelDate"
				cancel-button-text="清空" />
		</van-popup>
	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();

		api.addEventListener({
			name: 'selectRow'
		}, function (ret, err) {
			var selectType = ret.value.selectType;
			var type = ret.value.type;
			var row = ret.value.row;
			if (selectType == 10) {
				if (row) {
					vm.searchData.S_ClientName = row.name;
					vm.searchData.S_ClientID = row.id;
				} else {
					vm.searchData.S_ClientName = '';
					vm.searchData.S_ClientID = 0;
				}

			}

		});

		api.addEventListener({
			name: 'refreshDraft'
		}, function (ret, err) {
			vm.getList();
		})

		var userInfo = FLD.getUserInfo();

		var objName = api.pageParam.objName;

		var dateIndex = 0;
		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				showSearch: false,
				showDelete: false,
				dataList: [],
				currentDate: new Date(),
				showDate: false,
				searchData: {
					S_ClientID: 0,
					S_ClientName: '',
					S_BranchID: userInfo.S_BranchID,
					S_SDate: '',
					S_EDate: ''
				}

			},
			created: function () {
				this.getList();
			},
			methods: {
				getList() {
					var that = this;
					that.showLoading = true;
					var sql = "select * from Draft where Type=-1 and Remark='" + objName + "' order by CreateTime desc";
					DB.selectSql(sql, function (data) {
						that.showLoading = false;
						var showArray = [];
						for (var i in data) {
							var jsonData = JSON.parse(data[i].JSONStr3);
							jsonData.push({
								name: '更新时间',
								value: data[i].UpdateTime || data[i].CreateTime
							})
							showArray.push({
								valueArray: jsonData,
								DraftID: data[i].DraftID
							})
						}
						that.dataList = showArray;
					})
				},
				deleteRow(row, index) {
					var that = this;
					this.$dialog.confirm({
						title: '提示',
						message: '是否删除该条草稿?'
					}).then(() => {
						var sql = "delete from Draft where DraftID='" + row.DraftID + "'";
						DB.executeSql(sql, function () {
							layer.open({
								content: '删除成功',
								skin: 'msg',
								time: 2
							});
							that.dataList.splice(index, 1);
						})

					}).catch(() => {

					});

				},
				intoPage(row) {
					api.openWin({
						name: 'formConfigByDraft',
						url: 'formConfig.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							objName:objName,
							draftID:row.DraftID,
							titleName:objName.replace(/app_/g,'')
						}
					})
				},

				searchList() {
					var that = this;
					that.showSearch = false;

					that.pageIndex1 = 1;
					that.pageIndex2 = 1;
					that.pageIndex3 = 1;

					this.getList();
				},
				openScreen(type, index) {
					var obj = {
						S_Type: index,
						S_Cont: '',
						S_BranchID: userInfo.S_BranchID,
						S_SXZ: '',
						S_StockID: userInfo.S_StockID,
						S_CargoID: userInfo.S_CargoID,
						S_BarCode: '',
						S_PriceN: 0,
						S_ProductID: 0
					}

					api.openWin({
						name: '筛选' + index,
						url: 'baseScreen.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							filterData: obj,
							type: type,
							allowClear: true
						}
					})

				},
				openDate(index) {
					dateIndex = index;
					this.currentDate = new Date()
					this.showDate = true;
				},
				confirmDate(value) {
					if (dateIndex == 1) {
						this.searchData.S_SDate = FLD.getFormatDate(value).split(' ')[0]
					} else {
						this.searchData.S_EDate = FLD.getFormatDate(value).split(' ')[0]
					}
					this.showDate = false;
				},
				cancelDate(value) {
					if (dateIndex == 1) {
						this.searchData.S_SDate = ''
					} else {
						this.searchData.S_EDate = '';
					}
					this.showDate = false;
				},
				intoRow(row) {


				},
				onClickLeft() {
					api.closeWin();
				}
			}
		})
	};
</script>

</html>